/**
 * Copyright(c) 2006-2008, FeyaSoft Inc.
 */
package("feyaSoft.source");

/**
 * This JS is mainly used to display design and doc with tree format.
 *
 * @author fzhuang
 * @Date Oct 29, 2007
 */
feyaSoft.source.DesignAndDoc = function(app, src) {

    // pre-define parameters
    var desktop = app.getDesktop();
    var win = desktop.getWindow('designAndDoc'); 
    
    Ext.QuickTips.init();

   /************************************************************
	* define west panel
    ************************************************************/
    // set up the Album tree
    var westPanel = new Ext.tree.TreePanel({
         // tree
         animate:true,
         enableDD:true,
         containerScroll: true,
         rootVisible:false,
         iconCls:'editItem',
         
         // layout
         region:'west',
         width:170,
         split:true,
         collapsible:true,
         
         // panel
         title:'Documents',
         autoScroll:true,
         margins: '3 0 3 3'
    });

    var root = new Ext.tree.TreeNode({
        text: 'Documents',
        allowDrag:false,
        allowDrop:false
    });
    westPanel.setRootNode(root);

    // add child node now
    root.appendChild(
        new Ext.tree.TreeNode({text:'Welcome', 
                               id: 'welcome.html',
                               iconCls:'document', 
                               allowDrag:false}),
        new Ext.tree.TreeNode({text:'Architecture', 
                               id: 'architecture.html',
                               iconCls:'document',  
                               allowDrag:false}),
        new Ext.tree.TreeNode({text:'HLA diagram', 
                               id: 'hla_diagram.html',
                               iconCls:'document',  
                               allowDrag:false}),                       
        new Ext.tree.TreeNode({text:'3rd Party Softwares', 
                               id: '3rd_software.html',
                               iconCls:'document',  
                               allowDrag:false}),
        new Ext.tree.TreeNode({text:'JavaScript Structure', 
                               id: 'javaScriptDesc.html',
                               iconCls:'document',  
                               allowDrag:false}),
        new Ext.tree.TreeNode({text:'JSON speed up AJAX', 
                               id: 'jsonDesc.html',
                               iconCls:'document',  
                               allowDrag:false})
    );
    
    // handle db click event and contextMenu
	westPanel.on("dblclick", onClickHandler, this);
	
   /************************************************************
	* user double click the file now and show it in body part.
    ************************************************************/    
    function onClickHandler(node, obj, options) {         
        var comp = Ext.getCmp(node.id);
        
        if (!comp){
            centerPanel.add({
                title: node.text,
                id: node.id,
	            closable:true,
	            autoScroll:true,
	            autoLoad: {url: '/public/html/design/'+node.id, scripts: true}
            });

            comp = Ext.getCmp(node.id);
			centerPanel.setActiveTab(comp);
			
			comp.on('bodyresize', function(){
			    comp.doLayout();
			}, this);
        } else{
			centerPanel.setActiveTab(comp);
		}
    }
    
   /************************************************************
	* define center tab panel
    ************************************************************/
    var centerPanel = new Ext.TabPanel({
        region: 'center',
        margins:'3 3 3 0', 
        activeTab: 0,
        deferredRender:false,
        enableTabScroll:true,
        monitorResize: true,

        items:[{
            id: 'welcome.html',
            title: 'Welcome',
            closable:false,
            autoScroll:true,
            autoLoad: {url: '/public/html/design/welcome.html', scripts: true}
        }]
    });

   /************************************************************
	* define window now
    ************************************************************/
    if (!win) {
        win = desktop.createWindow({
            id: 'designAndDoc',
            title:'Design and Description for FeyaSoft Dynamic Web',
            width:900,
            height:500,
            x:10,
            y:10,
            iconCls:'editItem',
            layoutConfig: {animate:false},
            shim:false,
            animCollapse:false,
            constrainHeader:true,
            layout: 'border',            
            
            items:[westPanel, centerPanel]
        });	            
    }
    win.show();    	        
};



